// DynamicChartComponent.tsx
import React, { useState, useEffect } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';

interface ModelData {
  //chartType: string;
  option: echarts.EChartsOption;
}

const DynamicChartComponent: React.FC<{ modelData: ModelData }> = ({ modelData }) => {
  const [chartOption, setChartOption] = useState<echarts.EChartsOption | null>(null);
  console.log(chartOption,'chartOption')
  useEffect(() => {
    if (modelData) {
      setChartOption(modelData.option);
    }
  }, [modelData]);

  if (!chartOption) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      
      <ReactECharts option={chartOption} style={{ height: '400px' }} />
    </div>
  );
};

export default DynamicChartComponent;